<template>
  <div class="hot-ranking-sidebar">
    <!-- 热度榜标题 -->
    <div class="sidebar-header">
      <h3>
        <el-icon><TrendCharts /></el-icon>
        热度榜
      </h3>
      <el-select 
        v-model="timeRange" 
        size="small" 
        style="width: 100px"
        @change="fetchHotRanking"
        popper-class="hot-ranking-select-dropdown"
      >
        <el-option label="今日" value="today" />
        <el-option label="本周" value="week" />
        <el-option label="本月" value="month" />
      </el-select>
    </div>

    <!-- 热度榜列表 -->
    <div class="ranking-list" v-loading="loading">
      <div 
        v-for="(item, index) in rankings" 
        :key="item.postId"
        class="ranking-item"
        :class="{ 'top-three': index < 3 }"
        @click="goToPost(item.postId)"
      >
        <!-- 排名 -->
        <div class="rank-number" :class="`rank-${index + 1}`">
          <span v-if="index < 3" class="crown">👑</span>
          <span v-else>{{ index + 1 }}</span>
        </div>

        <!-- 帖子信息 -->
        <div class="post-info">
          <h4 class="post-title">{{ item.title }}</h4>
          <div class="post-meta">
            <span class="author">{{ item.author }}</span>
            <span class="hot-score">
              <el-icon><Lightning /></el-icon>
              {{ formatHotScore(item.hotScore) }}
            </span>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="rankings.length === 0 && !loading" class="empty-ranking">
        <el-empty 
          description="暂无热度数据" 
          :image-size="80"
        />
      </div>
    </div>

    <!-- 统计信息 -->
    <div class="ranking-stats" v-if="stats">
      <div class="stat-item">
        <span class="stat-label">今日帖子</span>
        <span class="stat-value">{{ stats.todayPosts }}</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">今日浏览</span>
        <span class="stat-value">{{ formatNumber(stats.todayViews) }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { hotRankingApi } from '@/api/hotRanking'

const props = defineProps({
  categoryId: {
    type: [String, Number],
    default: null
  }
})

const router = useRouter()
const loading = ref(false)
const timeRange = ref('today')
const rankings = ref([])
const stats = ref(null)

// 获取热度榜数据
const fetchHotRanking = async () => {
  try {
    loading.value = true
    
    let response
    if (props.categoryId) {
      // 获取分类热度榜
      response = await hotRankingApi.getCategoryHotRanking(props.categoryId, {
        limit: 10,
        timeRange: timeRange.value
      })
    } else {
      // 获取全站热度榜
      response = await hotRankingApi.getHotRanking({
        limit: 10,
        timeRange: timeRange.value
      })
    }
    
    rankings.value = response.data.rankings || []
  } catch (error) {
    console.error('获取热度榜失败:', error)
    rankings.value = [
      // 模拟数据
      {
        postId: '1',
        title: '前端开发学习心得分享',
        author: '小明',
        hotScore: 9999,
        likesCount: 100,
        commentsCount: 50
      },
      {
        postId: '2', 
        title: '校园生活精彩瞬间',
        author: '小红',
        hotScore: 8888,
        likesCount: 80,
        commentsCount: 30
      },
      {
        postId: '3',
        title: '求助：数据结构算法问题',
        author: '小李',
        hotScore: 7777,
        likesCount: 60,
        commentsCount: 25
      },
      {
        postId: '4',
        title: '社团招新活动报名',
        author: '学生会',
        hotScore: 6666,
        likesCount: 45,
        commentsCount: 20
      },
      {
        postId: '5',
        title: '二手教材转让',
        author: '小王',
        hotScore: 5555,
        likesCount: 30,
        commentsCount: 15
      }
    ]
  } finally {
    loading.value = false
  }
}

// 获取统计数据
const fetchStats = async () => {
  try {
    const response = await hotRankingApi.getHotStats()
    stats.value = response.data
  } catch (error) {
    console.error('获取统计数据失败:', error)
    // 模拟数据
    stats.value = {
      todayPosts: 42,
      todayViews: 8888
    }
  }
}

// 跳转到帖子详情
const goToPost = (postId) => {
  router.push(`/post/${postId}`)
}

// 格式化热度分数
const formatHotScore = (score) => {
  if (score >= 10000) {
    return (score / 10000).toFixed(1) + 'w'
  } else if (score >= 1000) {
    return (score / 1000).toFixed(1) + 'k'
  }
  return score
}

// 格式化数字
const formatNumber = (num) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + 'w'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'k'
  }
  return num
}

// 监听分类变化
watch(() => props.categoryId, () => {
  fetchHotRanking()
})

// 初始化
onMounted(() => {
  fetchHotRanking()
  fetchStats()
})
</script>

<style scoped>
.hot-ranking-sidebar {
  width: 300px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 24px;
  color: #1e293b;
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.6);
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hot-ranking-sidebar:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: rgba(102, 126, 234, 0.2);
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid rgba(102, 126, 234, 0.1);
  position: relative;
}

.sidebar-header::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 1px;
}

.sidebar-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1e293b;
  letter-spacing: -0.5px;
}

.sidebar-header h3 .el-icon {
  color: #667eea;
  font-size: 22px;
}

.sidebar-header .el-select {
  width: 100px;
}

.sidebar-header .el-select .el-input__wrapper {
  background: rgba(248, 250, 252, 0.9) !important;
  border: 1px solid rgba(226, 232, 240, 0.6) !important;
  box-shadow: none !important;
}

.sidebar-header .el-select:hover .el-input__wrapper {
  border-color: #667eea !important;
}

.sidebar-header .el-select .el-input__wrapper.is-focus {
  border-color: #667eea !important;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) !important;
}

.ranking-list {
  margin-bottom: 24px;
}

.ranking-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  margin-bottom: 12px;
  background: rgba(248, 250, 252, 0.9);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(226, 232, 240, 0.4);
  position: relative;
  overflow: hidden;
}

.ranking-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: width 0.3s ease;
  opacity: 0.1;
}

.ranking-item:hover::before {
  width: 100%;
}

.ranking-item:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateX(8px);
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04);
  border-color: rgba(102, 126, 234, 0.2);
}

.ranking-item.top-three {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05));
  border: 1px solid rgba(255, 215, 0, 0.2);
}

.ranking-item.top-three:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
  border-color: rgba(255, 215, 0, 0.3);
}

.rank-number {
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.rank-1 {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.rank-2 {
  background: linear-gradient(135deg, #C0C0C0 0%, #A9A9A9 100%);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 12px rgba(192, 192, 192, 0.4);
}

.rank-3 {
  background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 12px rgba(205, 127, 50, 0.4);
}

.rank-number:not(.rank-1):not(.rank-2):not(.rank-3) {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  font-weight: 600;
}

.crown {
  font-size: 18px;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-4px);
  }
  60% {
    transform: translateY(-2px);
  }
}

.post-info {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.post-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #1e293b;
  letter-spacing: -0.2px;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #64748b;
}

.author {
  font-weight: 600;
  color: #475569;
}

.hot-score {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #f59e0b;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.1);
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
}

.empty-ranking {
  text-align: center;
  padding: 40px 20px;
  color: #64748b;
}

.ranking-stats {
  padding-top: 20px;
  border-top: 2px solid rgba(102, 126, 234, 0.1);
  position: relative;
}

.ranking-stats::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 1px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  padding: 8px 12px;
  background: rgba(248, 250, 252, 0.6);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: rgba(102, 126, 234, 0.05);
  transform: translateX(4px);
}

.stat-label {
  color: #64748b;
  font-weight: 500;
}

.stat-value {
  font-weight: 700;
  color: #667eea;
  font-size: 15px;
}

/* 滚动条样式 */
.hot-ranking-sidebar::-webkit-scrollbar {
  width: 6px;
}

.hot-ranking-sidebar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.hot-ranking-sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 3px;
  transition: all 0.3s ease;
}

.hot-ranking-sidebar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

/* 加载动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ranking-item {
  animation: fadeInUp 0.3s ease forwards;
}

.ranking-item:nth-child(1) { animation-delay: 0.1s; }
.ranking-item:nth-child(2) { animation-delay: 0.2s; }
.ranking-item:nth-child(3) { animation-delay: 0.3s; }
.ranking-item:nth-child(4) { animation-delay: 0.4s; }
.ranking-item:nth-child(5) { animation-delay: 0.5s; }
</style>

<!-- 全局样式，修复下拉框在热度榜中的显示问题 -->
<style>
.hot-ranking-select-dropdown {
  z-index: 9999 !important;
}

.hot-ranking-select-dropdown .el-select-dropdown__item {
  padding: 8px 12px !important;
  font-size: 13px !important;
  color: #1e293b !important;
}

.hot-ranking-select-dropdown .el-select-dropdown__item:hover {
  background-color: rgba(102, 126, 234, 0.1) !important;
  color: #667eea !important;
}

.hot-ranking-select-dropdown .el-select-dropdown__item.selected {
  background-color: rgba(102, 126, 234, 0.15) !important;
  color: #667eea !important;
  font-weight: 600;
}
</style>